{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}{{ subject.name }} - 科目分析 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/subject_profile.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->
    <div class="subject-profile-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:profile_dashboard' %}">知识点画像</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ subject.name }}</li>
                    </ol>
                </nav>
                <h1 class="mb-2">
                    <i class="fas fa-layer-group me-2"></i>{{ subject.name }} 科目分析
                </h1>
                <p class="mb-0 opacity-75">
                    深入了解 {{ subject.name }} 科目的知识点掌握情况
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>返回仪表板
                    </a>
                    <button onclick="window.exportSubjectData()" class="btn btn-light btn-sm">
                        <i class="fas fa-download me-1"></i>导出数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 科目概览 -->
    <div class="subject-overview-card fade-in-up">
        <div class="subject-icon-large" style="background: {{ subject.color|default:'#17a2b8' }};">
            <i class="fas fa-book"></i>
        </div>
        <h2 class="subject-title">{{ subject.name }}</h2>
        <p class="subject-description">
            {{ subject.description|default:"这个科目还没有描述信息" }}
        </p>

        <div class="subject-stats-grid">
            <div class="subject-stat-card">
                <div class="subject-stat-icon bg-info">
                    <i class="fas fa-bullseye"></i>
                </div>
                <div class="subject-stat-value text-info">{{ total_points }}</div>
                <div class="subject-stat-label">总知识点数</div>
            </div>

            <div class="subject-stat-card">
                <div class="subject-stat-icon bg-excellent">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="subject-stat-value text-excellent">{{ mastery_distribution.excellent }}</div>
                <div class="subject-stat-label">优秀掌握</div>
            </div>

            <div class="subject-stat-card">
                <div class="subject-stat-icon bg-good">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="subject-stat-value text-good">{{ mastery_distribution.good }}</div>
                <div class="subject-stat-label">良好掌握</div>
            </div>

            <div class="subject-stat-card">
                <div class="subject-stat-icon bg-poor">
                    <i class="fas fa-exclamation-triangle"></i>
                </div>
                <div class="subject-stat-value text-poor">{{ mastery_distribution.poor }}</div>
                <div class="subject-stat-label">需要加强</div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧内容 -->
        <div class="col-lg-8">
            <!-- 知识点列表 -->
            <div class="knowledge-list-section fade-in-up">
                <div class="section-header">
                    <h3 class="section-title">
                        <i class="fas fa-list-ul text-primary"></i>知识点列表
                    </h3>
                    <div class="controls-row">
                        <div class="control-group">
                            <span class="control-label">排序:</span>
                            <select class="form-select form-select-sm" id="sortKnowledge">
                                <option value="mastery-asc">掌握度升序</option>
                                <option value="mastery-desc">掌握度降序</option>
                                <option value="name-asc">名称升序</option>
                                <option value="name-desc">名称降序</option>
                            </select>
                        </div>

                        <div class="control-group">
                            <span class="control-label">掌握度:</span>
                            <select class="form-select form-select-sm" id="masteryFilter">
                                <option value="">全部</option>
                                <option value="excellent">优秀 (≥80%)</option>
                                <option value="good">良好 (60-79%)</option>
                                <option value="average">一般 (40-59%)</option>
                                <option value="poor">薄弱 (<40%)</option>
                            </select>
                        </div>

                        <div class="control-group">
                            <span class="control-label">状态:</span>
                            <select class="form-select form-select-sm" id="statusFilter">
                                <option value="">全部</option>
                                <option value="not_started">未开始</option>
                                <option value="learning">学习中</option>
                                <option value="reviewing">复习中</option>
                                <option value="mastered">已掌握</option>
                                <option value="struggling">困难中</option>
                            </select>
                        </div>

                        <span class="text-muted small" id="visibleCount">
                            显示 {{ profiles|length }} / {{ profiles|length }} 个知识点
                        </span>
                    </div>
                </div>

                {% if profiles %}
                <div class="knowledge-grid">
                    {% for profile in profiles %}
                    <div class="knowledge-card
                         {% if profile.mastery_level >= 0.8 %}border-excellent
                         {% elif profile.mastery_level >= 0.6 %}border-good
                         {% elif profile.mastery_level >= 0.4 %}border-average
                         {% else %}border-poor{% endif %}"
                         data-knowledge-id="{{ profile.id }}"
                         data-mastery="{{ profile.mastery_level }}"
                         data-status="{{ profile.learning_status }}">

                        <div class="knowledge-header">
                            <h4 class="knowledge-name">{{ profile.knowledge_point.name }}</h4>
                            <span class="mastery-badge
                                {% if profile.mastery_level >= 0.8 %}bg-excellent
                                {% elif profile.mastery_level >= 0.6 %}bg-good
                                {% elif profile.mastery_level >= 0.4 %}bg-average
                                {% else %}bg-poor{% endif %}">
                                {{ profile.mastery_level|multiply:100|floatformat:0 }}%
                            </span>
                        </div>

                        <div class="knowledge-progress">
                            <div class="knowledge-progress-bar
                                {% if profile.mastery_level >= 0.8 %}bg-excellent
                                {% elif profile.mastery_level >= 0.6 %}bg-good
                                {% elif profile.mastery_level >= 0.4 %}bg-average
                                {% else %}bg-poor{% endif %}"
                                style="width: {{ profile.mastery_level|multiply:100 }}%">
                            </div>
                        </div>

                        <div class="knowledge-meta">
                            <span>状态: {{ profile.get_learning_status_display }}</span>
                            {% if profile.next_review_date %}
                            <span>复习: {{ profile.next_review_date }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="empty-state">
                    <div class="empty-icon">
                        <i class="fas fa-inbox"></i>
                    </div>
                    <h3 class="empty-title">暂无知识点数据</h3>
                    <p class="empty-description">
                        该科目下还没有记录知识点掌握情况
                    </p>
                    <a href="{% url 'score:score_add' %}" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>添加成绩记录
                    </a>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="col-lg-4">
            <!-- 掌握度分布 -->
            <div class="distribution-cards">
                <div class="distribution-card fade-in-up">
                    <div class="distribution-header">
                        <h3 class="distribution-title">
                            <i class="fas fa-chart-pie text-success"></i>掌握度分布
                        </h3>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-excellent"></div>
                            <span class="distribution-name">优秀掌握</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ mastery_distribution.excellent }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ mastery_distribution.excellent|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-good"></div>
                            <span class="distribution-name">良好掌握</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ mastery_distribution.good }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ mastery_distribution.good|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-average"></div>
                            <span class="distribution-name">一般掌握</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ mastery_distribution.average }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ mastery_distribution.average|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-poor"></div>
                            <span class="distribution-name">需要加强</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ mastery_distribution.poor }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ mastery_distribution.poor|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 学习状态分布 -->
                <div class="distribution-card fade-in-up">
                    <div class="distribution-header">
                        <h3 class="distribution-title">
                            <i class="fas fa-tasks text-info"></i>学习状态分布
                        </h3>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-info"></div>
                            <span class="distribution-name">未开始</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ status_distribution.not_started }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ status_distribution.not_started|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-info"></div>
                            <span class="distribution-name">学习中</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ status_distribution.learning }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ status_distribution.learning|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-info"></div>
                            <span class="distribution-name">复习中</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ status_distribution.reviewing }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ status_distribution.reviewing|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-info"></div>
                            <span class="distribution-name">已掌握</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ status_distribution.mastered }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ status_distribution.mastered|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>

                    <div class="distribution-item">
                        <div class="distribution-info">
                            <div class="distribution-color bg-info"></div>
                            <span class="distribution-name">困难中</span>
                        </div>
                        <div class="distribution-stats">
                            <span class="distribution-count">{{ status_distribution.struggling }}</span>
                            <span class="distribution-percentage">
                                {% if total_points > 0 %}
                                    {{ status_distribution.struggling|divide:total_points|multiply:100|floatformat:1 }}%
                                {% else %}
                                    0%
                                {% endif %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分析报告 -->
            {% if subject_analysis %}
            <div class="analysis-report fade-in-up">
                <div class="section-header">
                    <h3 class="section-title">
                        <i class="fas fa-chart-line text-warning"></i>科目分析报告
                    </h3>
                </div>

                {% for insight in subject_analysis.insights %}
                <div class="insight-item border-info">
                    <div class="insight-title">{{ insight.title }}</div>
                    <p class="insight-description">{{ insight.description }}</p>
                </div>
                {% endfor %}

                {% if subject_analysis.recommendations %}
                <div class="insight-item border-success">
                    <div class="insight-title">学习建议</div>
                    <p class="insight-description">{{ subject_analysis.recommendations }}</p>
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'analysis/js/subject_profile.js' %}"></script>
{% endblock %}